<%--
  Created by IntelliJ IDEA.
  User: CFlower
  Date: 2017/6/11
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html lang="zh-CN">
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
    <meta name="renderer" content="webkit">
    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="mintor/datamonitor/uikit/ezuikit.js"></script>
    <title>测试页面</title>
    <style>
        html,body{margin:0; padding: 0;text-align: center;}
        video{width: 100%;height: 100%}
        .alpha_a{ filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9}
        .alpha_b{ filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0}
        div#but_dire
        {
            position: absolute;
            top: 0px;
            width: 40%;
            margin-right: 30%;
            margin-left: 30%;
            height: 25px;
            display: none
        }
        p#but_tool
        {
            position: absolute;
            top: 0px;
            height: 20px;
            width: 40%;
            margin-bottom: 0px;
            margin-top: 0px;
            margin-left: 30%;
            margin-right: 30%;

        }
    </style>
</head>
<body>
<%--<script src="https://open.ys7.com/sdk/js/1.0/ezuikit.js"></script>--%>

<video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay >
    <source src="http://hls.open.ys7.com/openlive/2369118c49f94fae8c99aece6f5bf9fb.hd.m3u8" type="application/x-mpegURL" />
    <source src="rtmp://rtmp.open.ys7.com/openlive/2369118c49f94fae8c99aece6f5bf9fb.hd" type="" />
    <source src="http://hls.open.ys7.com/openlive/2369118c49f94fae8c99aece6f5bf9fb.m3u8" type="application/x-mpegURL" />
    <source src="rtmp://rtmp.open.ys7.com/openlive/2369118c49f94fae8c99aece6f5bf9fb" type="" />
</video>

<div id="but_dire">
    <input id="press_up"  class="alpha_a" type="image" src='mintor/datamonitor/png/press_up.png'
          >
    <input id="press_down"  class="alpha_a" type="image" src='mintor/datamonitor/png/press_down.png'
          >
    <input id="press_left"  class="alpha_a" type="image" src='mintor/datamonitor/png/press_left.png'
          >
    <input id="press_right"  class="alpha_a" type="image" src='mintor/datamonitor/png/press_right.png'
          >
</div>
<p id="but_tool" ></p>
<div id="but_online" style="cursor: default;font-family: 微软雅黑;font-size: large;position: absolute;top: 0;right: 0;background-color: rgba(67,185,105,0.55);">设备在线</div>

<script>
    var accessToken;
    var deviceSerial="674369428";
    $(function () {
        $.ajax({													// 获取设备accessToken
            url:"video/getAccessToken",
            data: {'appKey': '7eab893eaa704775839e58868c814634','appSecret':'2d649a3a29ac703c0f0051663b917ec0'},
            type: "POST",
            async : true,      // 异步请求
            dataType: 'json',
            success: function (result) {
//                alert("accessToken:\n"+result.accessToken);
                accessToken = result.accessToken;                  // 要等待accessToken的获取，因此需要同步请求
                $.ajax({													// 获取设备在线状态
                    url:"video/getDeviceStatus",
                    data: {'accessToken': accessToken,'deviceSerial':deviceSerial},
                    type: "POST",
                    async : true,      // 异步请求
                    dataType: 'json',
                    success: function (result) {
                        if(result==false) $("#but_online").html("设备不在线");
                        else $("#but_online").html("设备在线");
                    }
                });
            }
        });

        var player = new EZUIPlayer('myPlayer');

    });

    $("#but_tool").mouseenter(function(){
        $("#but_dire").slideToggle("slow");
        $("#but_tool").hide();
    });

    $("#but_dire").mouseleave(function(){
        $("#but_dire").hide();
        $("#but_tool").show();
    });

    $("#press_up").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':0,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#press_up").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {
            }
        });
    });

    $("#press_down").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':1,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#press_down").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

    $("#press_left").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':2,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#press_left").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

    $("#press_right").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':3,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#press_right").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

    $("#press_enlarge").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':8,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#press_enlarge").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

    $("#press_shrink").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':9,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#press_shrink").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

    $("#near_focus").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':10,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#near_focus").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

    $("#far_focus").mousedown(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControl",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1,
                'direction':11,
                'speed':1 },
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });
    $("#far_focus").mouseup(function (){
        $.ajax({													// 加载所有的传感器
            url:"video/setVideoControlStop",
            data: {
                'accessToken': accessToken,
                'deviceSerial':deviceSerial,
                'channelNo': 1},
            type: "POST",
            dataType: 'json',
            success: function (result) {

            }
        });
    });

</script>
</body>
</html>